<template>
  <div class="forget-password" @click='$refs.verify.show = false'>
    <div style="height:50px;"></div>
    <!-- 顶部logo -->
    <div class="logo-box">
      <img
          :src="$store.state.logoImg" width='150'
          @click="$router.push('/')"
      />
      <div>修改密碼</div>
    </div>
    <div class="login-container">
      <!-- 驗證手機號 -->
      <Form
          v-show="step === 0"
          ref="formFirst"
          :model="formFirst"
          :rules="ruleInline"
          style="width:300px;"
      >
        <FormItem prop="mobile">
          <i-input
              v-model="formFirst.mobile"
              clearable
              placeholder="手機號"
              type="text"
          >
            <Icon slot="prepend" type="md-phone-portrait"></Icon>
          </i-input>
        </FormItem>
        <FormItem prop="code">
          <i-input
              v-model="formFirst.code"
              clearable
              placeholder="手機驗證碼"
              type="text"
          >
            <Icon
                slot="prepend"
                style="font-weight: bold"
                type="ios-text-outline"
            />
            <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
          </i-input>
        </FormItem>
        <FormItem>
          <Button :type="verifyStatus?'success':'default'" long @click="verifyBtnClick">
            {{ verifyStatus ? '驗證通过' : '點擊完成安全驗證' }}
          </Button>
        </FormItem>
        <FormItem>
          <Button :loading="loading" long type="error" @click="next">下一步</Button>
        </FormItem>
      </Form>
      <Form
          v-show="step === 1"
          ref="form"
          :model="form"
          :rules="ruleInline"
          style="width:300px;"
      >
        <FormItem prop="password">
          <i-input
              v-model="form.password"
              clearable
              placeholder="請輸入至少六位密碼"
              type="password"
          >
            <Icon slot="prepend" type="md-lock"></Icon>
          </i-input>
        </FormItem>
        <FormItem prop="password">
          <i-input
              v-model="form.oncePasd"
              clearable
              placeholder="請再次輸入密碼"
              type="password"
          >
            <Icon slot="prepend" type="md-lock"></Icon>
          </i-input>
        </FormItem>
        <FormItem>
          <Button :loading="loading1" long size="large" type="error" @click="handleSubmit">提交</Button>
        </FormItem>
      </Form>
      <!-- 拼图驗證碼 -->
      <Verify
          ref="verify"
          :verifyType="verifyType"
          class="verify-con"
          @change="verifyChange"
      ></Verify>
      <div class="login-btn"><a @click="$router.push('login')">前往登錄</a></div>
    </div>
    <div class="foot">
      <!-- <Row class="help" justify="space-around" type="flex">
        <a class="item" href="https://pickmall.cn/" target="_blank">帮助</a>
        <a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
        <a class="item" href="https://pickmall.cn/" target="_blank">條款</a>
      </Row> -->
      <Row class="copyright" justify="center" type="flex">
        Copyright © {{ config.title }}
        <!-- <a href="https://pickmall.cn/" style="margin: 0 5px" target="_blank"
        >{{ config.title }}</a
        > -->
        版权所有
      </Row>
    </div>
  </div>
</template>

<script>

import * as RegExp from '@/plugins/RegExp.js';
import {md5} from '@/plugins/md5.js';
import * as apiLogin from '@/api/login.js';
import {sendSms} from '@/api/common.js';
import Verify from '@/components/verify';

export default {
  name: 'ForgetPassword',
  components: {Verify},
  data() {
    return {
      config: "",
      loading: false, // 加载狀態
      loading1: false, // 第二步加载狀態
      storeId: null,
      formFirst: { // 手機驗證碼表單
        // 註冊表單
        mobile: '',
        code: ''
      },
      form: { // 密碼
        password: '',
        oncePasd: ''
      },
      year: new Date().getFullYear(), // 当前年份
      step: 0, // 步骤
      ruleInline: {
        // 驗證规则
        mobile: [
          {required: true, message: '請輸入手機號碼'},
          {
            pattern: RegExp.mobile,
            trigger: 'blur',
            message: '請輸入正确的手機號'
          }
        ],
        code: [{required: true, message: '請輸入手機驗證碼'}],
        password: [{required: true, message: '密碼不能为空'}, {pattern: RegExp.password, message: '密碼不能少於6位'}]
      },
      verifyStatus: false, // 图片驗證狀態
      verifyType: 'FIND_USER', // 图片驗證類型
      codeMsg: '發送驗證碼', // 驗證碼文字
      interval: '', // 定時器
      time: 60 // 倒计時時間
    };
  },
  created() {
    this.storeId=this.$route.query.storeId;
    this.config=require('@/config/right'+this.storeId+'.js');
  },
    watch: {
      '$route.query.storeId': {
        immediate: true,
        handler(newVal) {
          this.storeId = newVal;
        }
      }
    },
  methods: {
    // 提交短信驗證碼，修改密碼
    next() {
      this.$refs.formFirst.validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = JSON.parse(JSON.stringify(this.formFirst));
          apiLogin.validateCode(data).then((res) => {
            this.loading = false;
            if (res.success) {
              //   this.$Message.success('');
              this.step = 1;
            } else {
              this.$Message.warning(res.message);
            }
          }).catch(() => {
            this.loading = false;
          });
        } else {
        }
      });
    },
    handleSubmit() { // 提交密碼
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form));
          if (params.password !== params.oncePasd) {
            this.$Message.warning('两次輸入密碼不一致');
            return;
          }

          params.mobile = this.formFirst.mobile;
          params.password = md5(params.password);
          delete params.oncePasd;
          this.loading1 = true;

          apiLogin.resetPassword(params).then(res => {
            this.loading1 = false;
            console.log(res);
            if (res.success) {
              this.$Message.success('修改密碼成功');
              this.$router.push('login');
            }
          }).catch(() => {
            this.loading = false;
          });
        }

      });
    },
    sendCode() { // 發送驗證碼
      if (this.time === 60) {
        if (this.formFirst.mobile === '') {
          this.$Message.warning('請先填写手機號');
          return;
        }
        if (!this.verifyStatus) {
          this.$Message.warning('請先完成安全驗證');
          return;
        }
        let params = {
          mobile: this.formFirst.mobile,
          verificationEnums: 'FIND_USER'
        };
        sendSms(params).then(res => {
          if (res.success) {
            this.$Message.success('驗證碼發送成功');
            let that = this;
            this.interval = setInterval(() => {
              that.time--;
              if (that.time === 0) {
                that.time = 60;
                that.codeMsg = '重新發送';
                that.verifyStatus = false;
                clearInterval(that.interval);
              } else {
                that.codeMsg = that.time;
              }
            }, 1000);
          } else {
            this.$Message.warning(res.message);
          }
        });
      }
    },
    verifyChange(con) { // 驗證通过
      if (!con.status) return;
      this.$refs.verify.show = false;
      this.verifyStatus = true;
    },
    verifyBtnClick() {
      if (!this.verifyStatus) {
        this.$refs.verify.init();
      }
    }
  },
  mounted() {
    document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
    this.$refs.formFirst.resetFields();
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
.forget-password {
  min-height: 700px;
}

.logo-box {
  width: 600px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;

  img {
    width: 150px;
    cursor: pointer;
  }

  div {
    font-size: 20px;
    margin-top: 10px;
  }
}

.login-container {
  border-top: 2px solid $theme_color;
  position: relative;
  margin: 0 auto;
  width: 600px;
  background-color: #fff;
  padding: 20px 150px;

  .login-btn {
    position: absolute;
    right: 20px;
    top: -45px;
  }
}

.verify-con {
  position: absolute;
  left: 140px;
  top: -30px;
  z-index: 10;
}

.other-login {
  margin: 0 auto;

  .ivu-icon {
    font-size: 24px;
  }
}

.regist {
  display: flex;
  justify-content: flex-end;
  margin-top: -10px;

  span {
    margin-left: 10px;

    &:hover {
      cursor: pointer;
      color: $theme_color;
    }
  }
}

.foot {
  position: fixed;
  bottom: 4vh;
  width: 368px;
  left: calc(50% - 184px);
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;

  .help {
    margin: 0 auto;
    margin-bottom: 1vh;
    width: 60%;

    .item {
      color: rgba(0, 0, 0, 0.45);
    }

    :hover {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>
